<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/game-details.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<common-header active-path="match-item.html"></common-header>
	<section class="content">
		<section class="top">
			<section class="container">
				<section class="breadcrumb" style="padding-bottom: 18px;">
					<img src="./images/loc.png" alt="">
					<section>
						赛项 > <a href="javascript:;">参赛详情</a> > 提交作品
					</section>
				</section>
			</section>
		</section>
		<section class="game-details">
			<section class="container">
				<section class="step-three step-item">
					<section class="upload-works">
						<section class="radio">
							<a
								v-for="item in uploadFileTypes"
								:class="{active: item.type === uploadType}"
								href="javascript:;"
								@click="changeType(item)"
							>{{ item.name }}</a>
						</section>
						<section class="upload-content">
							<label class="upload-tips">
								<img src="./images/icons/upload-icon.png" alt="">
								仅支持word、excel、ppt、可视化编程格式sb,sb2,sb3文件，zip，rar，mp4、jpg格式
								文档每队1个，视频1个，图片最多5个，文档类的不高5M，视频类的不高于50M（MP4），
								图片每个不超过1M
								<input :accept="fileTypeMap[uploadType]" type="file" style="display: none;" @change="uploadFile">
							</label>
							<section v-for="(file, index) in fileList.filter(function (item) {return item.type === uploadType})" class="upload-item">
								<section class="name">
									<section>{{ file.name }}(<span class="status">{{ file.status === 100 ? '上传成功' : file.status + '%'}}</span>)</section>
									<img v-if="file.status === 100" @click="removeFile(file)" src="./images/icons/delete-icon.png" alt="">
								</section>
								<section v-if="file.status !== 100" class="progress">
									<section :style="{width: file.status + '%'}" class="progress-bar"></section>
								</section>
							</section>
							<a href="javascript:;" class="submit-btn" @click="submit">提交</a>
						</section>
					</section>
				</section>
			</section>
		</section>
	</section>
	<common-footer></common-footer>
</section>
<script src="./js/jquery.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="./lib/layui/lay/modules/layer.js"></script>
<script src="./js/vue.min.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.4.0.min.js"></script>
<script src="../js/abkj/oss/app.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/match/api/tmatch.js"></script>
<script src="../js/abkj/ext/matchExt.js"></script>
<script src="../js/abkj/ext/signExt.js"></script>
<script src="./js/common.js"></script>
<script src="./components/index.js"></script>
<script>
	$(function () {
		var tool = fun_tool()
		new Vue({
			el: '.wrapper',
			data: {
				uploadType: 0,
				matchId: tool.getUrlParam('id'),
				userInfo: tool.getUserInfo(),
				uploadFileTypes: [
					{type: 0, name: '视频'},
					{type: 1, name: '图片'},
					{type: 2, name: '文档'},
				],
				fileTypeMap: ['video/mp4', 'image/jpeg', '.doc, .docx, .zip, .rar, .sb, .sb2, .sb3'],
				fileList: [],
				showModal: false,
			},
			mounted: function () {
				var vm = this
				// this.$refs.form.onsubmit = function () { return false}
				vm.userInfo && getMatchWork('', function (data) {
					if (data.docUrl) {
						var result = data.docUrl.map(function (item) {
							return {name: item.fileName, url: item.fileUrl, type: 2, status: 100}
						})
						result.forEach(function (item) {
							vm.fileList.push(item)
						})
					}
					if (data.videoUrl) {
						var result = data.videoUrl.map(function (item) {
							return {name: item.fileName, url: item.fileUrl, type: 0, status: 100}
						})
						result.forEach(function (item) {
							vm.fileList.push(item)
						})
					}
					if (data.imgUrl) {
						var result = data.imgUrl.map(function (item) {
							return {name: item.fileName, url: item.fileUrl, type: 1, status: 100}
						})
						result.forEach(function (item) {
							vm.fileList.push(item)
						})
					}
					vm.setIndex()
				})
				layui.use('layer')
			},
			methods: {
				submit() {
					var isDone = true
					this.fileList.forEach(function (file) {
						if (file.status !== 100) isDone = false
					})
					var fileList = this.fileList
					if (this.fileList.length === 0) return layer.msg('请上传作品', {icon: 5})
					if (!isDone) return layer.msg('请等待作品上传完成', {icon: 5})
					var videoList = fileList.filter(function (item) {
						return item.type === 0
					})
					var imgList = fileList.filter(function (item) {
						return item.type === 1
					})
					var docList = fileList.filter(function (item) {
						return item.type === 2
					})
					submitWork({
						videoUrl: videoList.map(function (item) {return {fileName: item.name, fileUrl: item.url}}),
						imgUrl: imgList.map(function (item) {return {fileName: item.name, fileUrl: item.url}}),
						docUrl: docList.map(function (item) {return {fileName: item.name, fileUrl: item.url}}),
					}, function () {
						layer.msg('提交成功！', {icon: 1})
					})
				},
				removeFile(file) {
					this.fileList.splice(file.index, 1)
					this.setIndex()
				},
				setIndex() {
					var vm = this
					this.fileList.forEach(function (item, index) {
						vm.$set(item, 'index', index)
					})
				},
				changeType: function (item) {
					this.uploadType = item.type
				},
				checkUpload: function (file) {//校验文件是否符合上传的条件
					if (!file) return false
					var size = file.size
					var fileList = this.fileList
					var videoList = fileList.filter(function (item) {
						return item.type === 0
					})
					var imgList = fileList.filter(function (item) {
						return item.type === 1
					})
					var docList = fileList.filter(function (item) {
						return item.type === 2
					})
					if (this.uploadType === 0) {
						if (videoList.length === 1) return layer.msg('只能上传一个视频', {icon: 2})
						if (size > 1024 * 1024 * 50)  return layer.msg('视频不能大于50M', {icon: 2})
					} else if (this.uploadType === 1) {
						if (imgList.length === 5) return layer.msg('最多只能上传5张图片', {icon: 2})
						if (size > 1024 * 1024)  return layer.msg('图片不能大于1M', {icon: 2})
					} else {
						if (docList.length === 1) return layer.msg('最多只能上传一个文档', {icon: 2})
						if (size > 1024 * 1024 * 5)  return layer.msg('文档大小不能超过5M', {icon: 2})
					}
					return true
				},
				uploadFile: function (e) {//上传文件
					var file = e.target.files[0]
					if (this.checkUpload(file) !== true) return
					var vm = this
					var fileObj = {name: file.name, url: '', type: this.uploadType, status: 0}
					vm.fileList.push(fileObj)
					this.setIndex()
					var timer = setInterval(function () {
						fileObj.status ++
						if (fileObj.status === 99) return clearInterval(timer)
					}, 30)
					applyTokenDo(file, function (res) {
						fileObj.status = 100
						fileObj.url = 'https://dzxh.oss-cn-hangzhou.aliyuncs.com/' + res.name
						clearInterval(timer)
					})
				}
			}
		})
	})
</script>
</body>
</html>
